<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/tooltip.css" />
		<link rel="stylesheet" href="js/Cesium/Widgets/widgets.css" />
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/Cesium/Cesium.js"></script>
		<script src="js/Cesiumtool/viewerCesiumNavigationMixin.js"></script>
		<script src="js/Cesiumtool/GlobeTooltip.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<style>
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#contanter{
				width:100%;
				height:100%
			}    
			/* 去除logo信息 */	
			.cesium-widget-credits{ 
				display:none!important; 
				visibility:hide!important; 
			} 
			/* 导航条的位置 */
			.compass{
				left:0px;
				top:20px
			}
			.navigation-controls{
				left:30px;
				top:110px
			}
			
			/* 添加点、线、面的按钮*/
			.addEntities{
				position: fixed;
				left: 110px;
				top: 10px;
				z-index: 99999;
			}
			button{
				background-color: rgba(47,53,60,0.8);
				color: #FFFFFF;
				border: 0;
				padding: 5px 15px;
				border-radius: 5px;
			}
      .addEntities_{
        position: fixed;
				left: 110px;
				top: 50px;
				z-index: 99999;
      }
		</style>
    </head>
    <body>
		<div id="contanter"></div>
		<!-- 添加实体 -->
		<div class="addEntities">
			<button onclick="addPoint()">点</button>
			<button onclick="addPolyLine()">线</button>
      <button onclick="addPolygon()">面</button>
      <button onclick="addBox()">盒子</button>
      <button onclick="addFont()">文字</button>
      <button onclick="addMark()">图标</button>
      <button onclick="addPolylineVolume()">管道</button>
      <button onclick="addCorridor()">走廊</button>
      <button onclick="addWall()">墙</button>
      <button onclick="addCylinder()">圆柱</button>
      <button onclick="addEllipse()">椭圆</button>
      <button onclick="addEllipsoid()">椭球体</button>
      <button onclick="addCylinder_()">圆锥</button>
      <button onclick="addEllipsoid_()">球</button>
			<button onclick="clearEntities()">清除</button>
    </div>
    <div class="addEntities_">
			<lable >模型</lable>
			<button onclick="addPerson()">人</button>
      <button onclick="addFly()">飞机</button>
      <button onclick="addMiniFly()">无人机</button>
      <button onclick="addCar()">汽车</button>
      <button onclick="addMark()">风力发电器</button>
       <button onclick="addMulou()">木楼</button>
		</div>
		<script>
			var viewer = new Cesium.Viewer("contanter",{
				animation: false,  //是否显示动画控件
	            baseLayerPicker: false, //是否显示图层选择控件
	            geocoder: true, //是否显示地名查找控件
	            timeline: false, //是否显示时间线控件
	            sceneModePicker: true, //是否显示投影方式控件
	            navigationHelpButton: false, //是否显示帮助信息控件
	            infoBox: true,  //是否显示点击要素之后显示的信息
				// 加载地形数据
				// terrainProvider: new Cesium.CesiumTerrainProvider({
				// 	url: Cesium.IonResource.fromAssetId(3956)
				// })
			})
			
      // // 添加点
			function addPoint(){

        var point ={
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          name : 'Red ellipse on surface',
          point  : {
            pixelSize:10,
            color:Cesium.Color.BLUE.withAlpha(0.5),
            outlineColor:Cesium.Color.RED,
            outlineWidth:2
          }
        }
        viewer.entities.add(point)
      }
      // 添加线
      function addPolyLine(){
        var polyline ={
          name:"线",
          polyline:{
            positions:Cesium.Cartesian3.fromDegreesArray([113.2, 34.5,114.0,35.0]),
            width:2,
            material: Cesium.Color.RED
          }
        } 
        viewer.entities.add(polyline)
      }
      // 添加点
      function addPolygon(){
        var polygon ={
          name:"面",
          polygon:{
            hierarchy:Cesium.Cartesian3.fromDegreesArray([113.2, 34.5,114.0,35.0,118.9,32.5,116.3,33.1]),
            material: Cesium.Color.RED
          }
        } 
        var entity = new Cesium.Entity(polygon)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加盒子
      function addBox(){
        var box ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          box: {
            dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
            material: Cesium.Color.BLUE
          }
        } 
        var entity = new Cesium.Entity(box)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加文字
      function addFont(){
        var label ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          label: {
            text: "三维地球",
            
          }
        } 
        var entity = new Cesium.Entity(label)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加图标
      function addMark(){
        var billboard ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          billboard : {
              image : './images/marker.png', // default: undefined
              // show : true, // default
              // pixelOffset : new Cesium.Cartesian2(0, -50), // default: (0, 0)
              // eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
              // horizontalOrigin : Cesium.HorizontalOrigin.CENTER, // default
              // verticalOrigin : Cesium.VerticalOrigin.BOTTOM, // default: CENTER
              // scale : 2.0, // default: 1.0
              // color : Cesium.Color.LIME, // default: WHITE
              // rotation : Cesium.Math.PI_OVER_FOUR, // default: 0.0
              // alignedAxis : Cesium.Cartesian3.ZERO, // default
              width : 50, // default: undefined
              height : 50 // default: undefined
          }
        } 
        var entity = new Cesium.Entity(billboard)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加管道
      function addPolylineVolume(){
        var polylineVolume ={
          name:"盒子",
          polylineVolume: {
            positions: Cesium.Cartesian3.fromDegreesArray([
              85.0,
              32.0,
              85.0,
              36.0,
              89.0,
              36.0
            ]),
            shape:computeCircle(60000.0),
            material: Cesium.Color.RED
          }
        } 
        var entity = new Cesium.Entity(polylineVolume)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }

      function computeCircle(radius) {
				var positions = [];
				for(var i = 0; i < 360; i++) {
					var radians = Cesium.Math.toRadians(i);
					positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
				}
				return positions;
      }
      // 添加走廊
      function addCorridor(){
        var corridor ={
          name:"盒子",
          corridor: {
            positions: Cesium.Cartesian3.fromDegreesArray([
              100.0,
              40.0,
              105.0,
              40.0,
              105.0,
              35.0
            ]),
            width: 200000.0,
            material: Cesium.Color.RED.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.WHITE
          }
        } 
        var entity = new Cesium.Entity(corridor)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加墙
      function addWall(){
        var wall ={
          name:"盒子",
          wall: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              107.0,
              43.0,
              100000.0,
              97.0,
              43.0,
              100000.0,
              97.0,
              40.0,
              100000.0,
              107.0,
              40.0,
              100000.0,
              107.0,
              43.0,
              100000.0
            ]),
            material: Cesium.Color.GREEN
          }
        } 
        var entity = new Cesium.Entity(wall)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加圆柱
      function addCylinder(){
        var cylinder ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          cylinder: {
            length: 400000.0,
            topRadius: 200000.0,
            bottomRadius: 200000.0,
            material: Cesium.Color.GREEN.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.DARK_GREEN
          }
        } 
        var entity = new Cesium.Entity(cylinder)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 椭圆
      function addEllipse(){
        var ellipse ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          ellipse: {
            semiMinorAxis: 300000.0,
            semiMajorAxis: 300000.0,
            height: 200000.0,
            material: Cesium.Color.GREEN
          }
        } 
        var entity = new Cesium.Entity(ellipse)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 椭球
      function addEllipsoid(){
        var ellipsoid ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          ellipsoid: {
            radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
            material: Cesium.Color.BLUE
          }
        } 
        var entity = new Cesium.Entity(ellipsoid)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加球体
      function addEllipsoid_(){
        var ellipsoid ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          ellipsoid: {
            radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
            material: Cesium.Color.BLUE
          }
        } 
        var entity = new Cesium.Entity(ellipsoid)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加圆锥
      function addCylinder_(){
        var cylinder ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          cylinder: {
            length: 400000.0,
            topRadius: 0.0,
            bottomRadius: 200000.0,
            material: Cesium.Color.GREEN.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.DARK_GREEN
          }
        } 
        var entity = new Cesium.Entity(cylinder)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加人模型
      function addPerson(){
        var person ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          model: {
            uri: "./data/SampleData/models/CesiumMan/Cesium_Man.gltf",
            minimumPixelSize: 28,
            maximumScale: 200
          }
        } 
        var entity = new Cesium.Entity(person)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加飞机
      function addFly(){
        var person ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5,200000),
          model: {
            uri: "./data/SampleData/models/CesiumAir/Cesium_Air.gltf",
            minimumPixelSize: 280,
            maximumScale: 2000
          }
        } 
        var entity = new Cesium.Entity(person)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加汽车
      function addCar(){
        var person ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          model: {
            uri: "./data/SampleData/models/DracoCompressed/CesiumMilkTruck.gltf",
            minimumPixelSize: 280,
            maximumScale: 2000
          }
        } 
        var entity = new Cesium.Entity(person)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 添加木楼
      function addMulou(){
        var person ={
          name:"盒子",
          position: Cesium.Cartesian3.fromDegrees(113.2, 34.5),
          model: {
            // uri: "./data/SampleData/models/DracoCompressed/CesiumMilkTruck.gltf",
            uri: "./data/SampleData/models/WoodTower/Wood_Tower.gltf",
            minimumPixelSize: 280,
            maximumScale: 2000
          }
        } 
        var entity = new Cesium.Entity(person)
        viewer.entities.add(entity)
        moveToEntity(entity)
      }
      // 自动定位到实体
      function moveToEntity(entity){
        viewer.flyTo(entity,{
          offset : {
              heading : Cesium.Math.toRadians(0.0),
              pitch : Cesium.Math.toRadians(-25),
              range : 0
          }
        })
      }
		  
		</script>
  </body>
</html>